<template>
  <div ref="ringRound" :style="{ width: '100%', height: height }"></div>
</template>

<script>
export default {
  props: {
    height: {
      type: String,
      default: "100%",
    },
    pieDatas: {
      type: Array,
      default() {
        return [
          {
            name: "商家比例",
            type: "pie",
            radius: ["40%", "70%"],
            label: {
              show: true,
              formatter: "{b} \n {d}%",
            },
            emphasis: {
              label: {
                show: true,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
            },
            data: [
              {
                value: 1048,
                name: "商家总数",
                itemStyle: { color: "#04f2fa" },
              },
              { value: 735, name: "复购", itemStyle: { color: "#fdce03" } },
              { value: 580, name: "活跃商家", itemStyle: { color: "#f9764c" } },
              { value: 484, name: "成交商家", itemStyle: { color: "#067cde" } },
            ],
          },
        ];
      },
    },
    seriesIndex: {
      type: Number,
      default: 0,
    },
    index: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      rignRound: "",
      options: "",
      number: 0,
    };
  },
  watch: {
    allLatlngs: {
      handler(val) {
        this.$nextTick(() => {
          if (this.rignRound) {
            this.options.series = this.pieDatas;
            this.rignRound.setOption(this.options);
            this.rignRound.dispatchAction({
              type: "highlight",
              seriesIndex: this.seriesIndex,
              dataIndex: this.index,
            });
          }
        });
      },
      immediate: true,
    },
  },
  computed: {
    allLatlngs() {
      const { pieDatas } = this;
      return {
        pieDatas,
      };
    },
  },
  methods: {
    init() {
      this.rignRound = this.$echarts.init(this.$refs.ringRound);
      this.rignRound.resize();
      this.options = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          show: false,
        },
        series: [],
        animationDuration: 2000,
		    animationEasing:"exponentialInOut",
      };
      //   自动执行选中状态。
      let _this = this;
      this.rignRound.on("mouseover", function (e) {
        _this.clearAction(e.dataIndex, "mouseover");
      });
      this.rignRound.on("mouseout", function (e) {
        _this.clearAction(e.dataIndex, "mouseout");
      });
    },
    // 清除上一个选中状态
    clearAction(dataIndex, type) {
      if (dataIndex != this.index) {
        this.rignRound.dispatchAction({
          type: type == "mouseover" ? "highlight" : "downplay",
          seriesIndex: this.seriesIndex,
          dataIndex: dataIndex,
        });
        this.rignRound.dispatchAction({
          type: type == "mouseover" ? "downplay" : "highlight",
          seriesIndex: this.seriesIndex,
          dataIndex: this.index,
        });
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
      window.addEventListener("resize", this.init, 20);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.init);
  },
};
</script>

<style>
</style>